<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="baidu-site-verification" content="<%= VUE_APP_BAIDU_SITE_VERIFICATION %>" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <style>
        [v-cloak] {
            display: block !important;
        }

        .loading {
            display: none;
            text-align: center;
        }

        .loading p {
            margin-top: 20px;
        }

        .load-effect {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 220px;
        }

        .load-effect span {
            position: absolute;
            display: inline-block;
            width: 16px;
            height: 16px;
            background: <%=VUE_APP_PRIMARY_COLOR%>;
            border-radius: 50%;
            animation: load 1.28s ease infinite;
        }

        .load-effect span:nth-child(1) {
            top: 50%;
            left: 0;
            margin-top: -8px;
            animation-delay: 0.16s;
        }

        .load-effect span:nth-child(2) {
            top: 14px;
            left: 14px;
            animation-delay: 0.32s;
        }

        .load-effect span:nth-child(3) {
            top: 0;
            left: 50%;
            margin-left: -8px;
            animation-delay: 0.48s;
        }

        .load-effect span:nth-child(4) {
            top: 14px;
            right: 14px;
            animation-delay: 0.64s;
        }

        .load-effect span:nth-child(5) {
            top: 50%;
            right: 0;
            margin-top: -8px;
            animation-delay: 0.8s;
        }

        .load-effect span:nth-child(6) {
            right: 14px;
            bottom: 14px;
            animation-delay: 0.96s;
        }

        .load-effect span:nth-child(7) {
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            animation-delay: 1.12s;
        }

        .load-effect span:nth-child(8) {
            bottom: 14px;
            left: 14px;
            animation-delay: 1.28s;
        }

        @keyframes load {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0.2;
            }
        }
    </style>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2115084_em9y98irv1s.css">
    <script type="text/javascript"
        src='https://polyfill.io/v3/polyfill.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2CglobalThis'></script>
</head>

<body>
    <noscript>
        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
                Please enable it to continue.</strong>
    </noscript>

    <div id="app">
        <div v-cloak class="loading">
            <div class="load-effect">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <p> Loading…… </p>
        </div>
    </div>
    <!-- built files will be auto injected -->
</body>
<% if (htmlWebpackPlugin.options.__PROD__ && VUE_APP_BAIDU_STATISTICS) { %>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?<%= VUE_APP_BAIDU_STATISTICS %>";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <% } %>

</html>